<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 14-12-30
  Time: 上午10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://blueimp.github.io/jQuery-File-Upload/css/jquery.fileupload-ui.css">
    <script src="http://www.see-source.com/js/jquery-1.8.1.js"></script>
    <script src="http://blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
    <script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
    <script src="http://www.see-source.com/js/jquery.tmpl.min.js"></script>
    <script>
        $(function(){
            var template = '<tr class="template-upload fade in">'+
            '<td>'+
            '<span class="preview"><canvas width="46" height="80"></canvas></span>'+
            '</td>'+
            '<td>'+
            ' <p class="name">${fileName_}</p>  '+
            '</td>'+
            '<td>'+
            '    <p class="size">${fileSize_} KB</p>'+
            '    <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>'+
            '</td>'+
            '<td>'+
            '    <button class="btn btn-primary start">'+
            '       <i class="icon-upload icon-white"></i>'+
            '       <span>Start</span>'+
            '    </button>'+
            '    <button class="btn btn-warning cancel">'+
            '       <i class="icon-ban-circle icon-white"></i>'+
            '       <span>Cancel</span>'+
            '    </button>        '+
            '</td>'+
            '</tr>';
            var url="";
            var currentData={};
            $('#fileupload').fileupload({
                autoUpload:true,
                url:url,
                dataType:"json",
                add:function(e,data){
                    var templateImpl= $.tmpl(template,{"fileName_":data.files[0].name,"fileSize_":(data.files[0].size/1000).toFixed(2)}).appendTo(".files");
                    data.content=templateImpl;
                    $(".start",templateImpl).click(function(){
                        currentData.bar=templateImpl;
                        $("<p/>").text('Uploading...').addClass("uploading").replaceAll($(this));
                        data.submit();
                    });
                    $(".cancle",templateImpl).click(function(){
                       $("<p/>").text('cancle...').replaceAll($(this));
                        data.abort();
                        $(templateImpl).remove();
                    });
                },
                done:function(e,data){
                    $(".uploading",data.content).text("上传成功");
                },
                progressall:function(){
                    var  progress =parseInt(data.loaded /data.total*100,10);
                    $('.bar',currentData.bar).css('width',progress+'%');
                }
            });
        });

    </script>
</head>
<body>
    <div class="container">
        <span class="btn btn-success fileupload-button">
            <i class="icon-plus icon-white"></i>
            <span>上传文件</span>
            <input id="fileupload" type="file" name="file[]" multiple
        </span>
        <br>
        <table role="presentation" class="table table-striped">
            <tbody class="files" data-toggle="modal-gallery" data-target="#model-gallery">
            </tbody>
        </table>
    </div>
</body>
</html>